<template>
    <div 
    class="weather-info" 
    v-if="weatherInfo"
    >
        <div class="item">
            <el-dropdown @command="handleCommand" trigger="click">
                <div class="city">
                    <div class="cityname">
                        {{weatherInfo.name}} 
                    </div>

                    <div class="btn-shift">
                        切换
                    </div>
                </div>          

                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item  disabled>切换城市</el-dropdown-item>

                    <el-dropdown-item 
                    v-for="item in cities" 
                    :key="item.valueid" 
                    :command="item.valuename"
                    >
                        {{item.valuename}}
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>  
        </div>

        <!-- <div class="item">
            <a target="_blank" :href="weatherInfo.sevenDWeather">
                七日天气
            </a>
        </div> -->

        <div class="item">
            {{weatherInfo.date}}
        </div>

        <div class="item">
            {{weatherInfo.datenl}}
        </div>

        <div class="item">
            {{weatherInfo.dayofweek}}
        </div>

        <div class="item">
            今{{weatherInfo.today_tianqi}}{{weatherInfo.today_wendu}}
        </div>

        <div class="item">
            明{{weatherInfo.tomorrow_tianqi}}{{weatherInfo.tomorrow_wendu}}
        </div>
    </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';

export default {
    data: () => ({
        
    }),
    computed: {
        ...mapGetters({
            cities: 'city/getCities',
            weatherInfo: 'city/getWeatherInfo',
        }),
    },
    methods: {
        handleCommand(command){
            this.updateUsersCityName(command);
            
            this.queryWeather({
                city: command,
            });
        },
        
        ...mapMutations({
            updateUsersCityName: "city/updateUsersCityName",
        }),
        ...mapActions({
            queryCity: 'city/queryCities',
            queryWeather: 'city/queryWeather',
        }),
    },
    mounted() {
        this.queryWeather();
        this.queryCity();
    },
}
</script>

<style lang="scss" scoped>
    @import '@css/var.scss';
    
    .weather-info{
        display: flex;
        align-items: center;
        color: #666666;
        font-size: 14px;

        a{
            color: #666666;
            cursor: pointer;

            &:hover{
                color: $primaryColor;
            }
        }

        .item{
            & + .item{
                margin-left: 10px;
            }
        }

        .city{
            display: flex;
            align-items: center;

            .cityname{

            }

            .btn-shift{
                font-size: 12px;
                margin-left: 4px;
                cursor: pointer;
                color: #8d8d8d;

                &:hover{
                    color: $primaryColor;
                }
            }
        }
    }
</style>
 